<%--
  Created by IntelliJ IDEA.
  User: Shuwei  Wang
  Date: 2020/6/22
  Time: 16:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">

</head>
<body>
<button class="layui-btn" id="mwb">男女比</button>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>

    var myChart=echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    // 定义变量option 在变量中 定义了图表展示的属性和数据
    $("#mwb").click(function () {
       $.ajax({
           url:'${pageContext.request.contextPath}/user/mwb'
           ,dataType:"json"
           ,type:"post",
           success:function (d) {
               var option = {
                   // 图表的标题
                   title: {
                       text: '用户男女人数比'
                   },
                   // 工具栏 可以为空
                   tooltip: {},
                   // 传奇 在数学中是系列的意思
                   // 数据的类别 y轴的数据代表什么意思
                   // 例如： 销量 人数 注册量 访问量 阅读量 点赞量等
                   legend: {
                       data:['人数']
                   },
                   // xAxis x轴坐标
                   xAxis: {
                       data: ["男","女"]
                   },
                   // y轴坐标 自动识别自动处理 不需要定义
                   yAxis: {},
                   // 给x轴赋值
                   series: [{
                       // 对应 legend 中的data值  必须一样
                       name: '人数',
                       // 图表展示的类型 bar 柱状图展示 line 折线图 pie 饼状图
                       type: 'bar',
                       // 给x轴坐标赋值
                       data: [d[1].value,d[0].value]
                   }]
               };
               myChart.setOption(option);
           }
       })
    });


</script>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script src="${pageContext.request.contextPath}/js/china.js"></script>
</body>
</html>
